<script setup>
import {ref, computed} from 'vue';
import {ElAvatar, ElContainer, ElHeader, ElMain} from 'element-plus';
import dayjs from 'dayjs';
import { getUserInfo} from "@/api/user.js"; // 需要安装dayjs库来处理日期格式化
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore()

const userInfo = ref({});

const initUserInfo = async () => {
  const result = await getUserInfo(userStore.user.id);
  console.log("我是用户信息")
  userInfo.value = result.data.data
}

initUserInfo()

const formatRegistrationDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD');
};


</script>


<template>
  <div class="personal-center">
    <el-container class="container">
      <el-header class="header">个人中心</el-header>
      <el-main class="main">
        <div class="info-wrapper">
          <div class="avatar-wrapper">
            <el-avatar :size="128" :src="userInfo.userAvatar"></el-avatar>
          </div>
          <div class="user-info">
            <h2 class="username">{{ userInfo.userName }}</h2>
            <p class="bio">{{ userInfo.userProfile }}</p>
            <p class="registration-time">注册时间：{{ formatRegistrationDate(userInfo.createTime) }}</p>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.personal-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 调整为你需要的高度 */
  background-color: #f5f5f5; /* 调整为你需要的背景色 */
}

.container {
  width: 60%; /* 调整为你需要的宽度 */
}

.header {
  background-color: white; /* 调整为你需要的背景色 */
  text-align: center;
  padding: 20px 0;
}

.main {
  background-color: white; /* 调整为你需要的背景色 */
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.info-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.avatar-wrapper {
  margin-bottom: 20px;
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.bio {
  font-size: 16px;
  color: #666666; /* 调整为你需要的字体颜色 */
  margin-bottom: 20px;
}

.registration-time {
  font-size: 14px;
  color: #999999; /* 调整为你需要的字体颜色 */
}
</style>
